<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="用户ID" prop="id">
      <el-input v-model="ruleForm.id" />
    </el-form-item>
    <el-form-item label="用户名称" prop="username">
      <el-input v-model="ruleForm.username" />
    </el-form-item>
    <el-form-item label="用户昵称" prop="nickname">
      <el-input v-model="ruleForm.nickname" />
    </el-form-item>
    <el-form-item label="用户电话" prop="mobile">
      <el-input v-model="ruleForm.mobile" />
    </el-form-item>
    <el-form-item label="用户头像" prop="avatar">
      <el-input v-model="ruleForm.avatar" />
    </el-form-item>
    <el-form-item label="用户状态" prop="status">
      <el-switch
        v-model="ruleForm.status"
        inline-prompt
        active-text="启用"
        inactive-text="禁止"
        :active-value="1"
        :inactive-value="0"
      />
    </el-form-item>

    <el-form-item>
      <el-button
        type="primary"
        :disabled="props.disabled"
        :loading="props.loading"
        @click="props.submitForm(ruleFormRef)"
      >
        Create
      </el-button>
      <el-button @click="reset">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { type UsersType } from '@/service/userDataGet'
import { reactive, ref, watch } from 'vue'
import { type ComponentSize, type FormInstance, type FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()

let resetFormData: UsersType = {
  id: '',
  username: '',
  avatar: '',
  mobile: '',
  nickname: '',
}

const props = defineProps<{
  formData: UsersType
  disabled: boolean
  loading: boolean
  submitForm: (a: any) => void
}>()

const formSize = ref<ComponentSize>('default')

const rules = reactive<FormRules<UsersType>>({
  id: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  username: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  nickname: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  mobile: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  avatar: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  status: [{ required: true, message: '不可以为空', trigger: 'blur' }],
})

const ruleForm = ref<UsersType>(props.formData)

watch(
  () => props.formData,
  (nVal) => {
    console.log(nVal, 'ruleFormruleFormruleForm')
    ruleForm.value = nVal
    resetFormData = JSON.parse(JSON.stringify(nVal))
    console.log(resetFormData, 'resetFormData')
  },
  {
    immediate: true,
  },
)

// watch(ruleForm, (nVal) => {
//   console.log(nVal, 'reffffruleFormruleFormruleForm')
// })

//  手动重置表单数据（不使用 表单组件抛出的方法重置）
const resetFieldsData = () => {
  ruleForm.value = JSON.parse(JSON.stringify(resetFormData))

  console.log(resetFormData, 'resetFormDataresetFormData')

  console.log('重置表单数据')
}

const reset = () => {
  resetFieldsData()
  ruleFormRef.value?.clearValidate()
}

defineExpose({
  reset,
  resetFieldsData,
})
</script>

<style></style>
